<template>
  <div class="articleList">
    <div style="width:100%;height:2.8rem;position:relative;" :style="{backgroundImage: 'url(http://img.wangyuhudong.com/' + info.icon + ')', backgroundSize:'cover'}">
      <div style="position: absolute;left:0.1rem;bottom:0.1rem" class="c-fff fs20 c-flex c-a-c">
        <i class="iconfont icon-yulan"></i>
        <div class="ml10">{{(info.read_num/10000).toFixed(2)}}W人浏览</div>
        <div class="ml10">10篇文章</div>
      </div>
    </div>
    <mt-tab-container>
      <mt-tab-container-item>
        <div v-for="obj in list" :key="obj.name" class="list-wrap" @click="goDetail(obj.id)">
          <div style="padding:0.2rem 0.4rem" class="c-flex br-b">
            <div class="pic">
              <img :src="'http://img.wangyuhudong.com/'+obj.icon" alt="">
            </div>
            <div class="c-box-flex" style="position: relative">
              <div class="title text-hidden">{{obj.title}}</div>
              <!-- <div class="content">{{obj.brief}}</div> -->
              <div class="c-flex" style="position: absolute;right:0;bottom:0">
                <div class="c-box-flex">
                </div>
                <div class="btn br-1">{{(obj.read_num/10000).toFixed(2)}}W阅读量</div>
              </div>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <div class="c-flex c-j-c loading">
      <p v-show="loading" class="page-infinite-loading">
        <mt-spinner type="fading-circle" color="#fff" :size="30"></mt-spinner>加载中...
      </p>
    </div>
    <div class="mask" v-show="loading"></div>
  </div>

</template>

<script>
  export default {
    name: "articleList",
    data() {
      return {
        list: [],
        info: {},
        loading:false
      };
    },
    mounted() {
      this.getDetail(this.$route.query.id);
    },
    methods: {
      getDetail(id) {
        this.loading = true;
        this.axios
          .post("invoking/invokingXQ", {
            id: id
          })
          .then(res => {
            console.log(res.data);
            if (res.data.code == 0) {
              this.loading = false;
              this.info = res.data.object.recommend[0];
              document.title = res.data.object.recommend[0].title; 
              this.list = res.data.object.recommend;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      goDetail(id) {
        this.$router.push({ path: "/articleListDetail", query: { id: id } });
      }
    }
  };
</script>
<style lang="less" scoped>
  .list-wrap {
    background: #fff;
  }

  .pic {
    width: 1.8rem;
    height: 1.78rem;
    background: #f6f6f6;
    margin-right: 0.3rem;

    img {
      width: 1.8rem;
      height: 1.78rem;
    }
  }

  .title {
    font-size: 0.3rem;
    color: #333;
    margin: 0.1rem 0;
  }

  .content {
    font-size: 0.2rem;
    color: #999;
    line-height: 0.36rem;
  }

  .btn {
    padding: 0 0.2rem;
    color: #d2d2d2;

    &:after {
      border-radius: 1rem;
    }
  }
</style>